<template>
    <div class="team-container">
        <van-nav-bar class="title" title="我的会员" left-arrow @click-left="onClickLeft"/>
        <div class="team-content">
            <div class="first-wrap" v-for="first in teamGroup.teamTree" :key="first.memberId">
                <div class="first">
                    <p>昵称：{{first.nickname}}</p>
                    <p>联系电话：{{first.mobile}}</p>
                    <p>伞下会员：{{first.childCounts}}</p>
                    <p>管理等级：{{first.levelName}}</p>
                    <p>
                        <van-button
                                style="margin-bottom: 20px; margin-right: 10px; padding: 0 5px 0 5px; position: absolute; top: 60px; right: 5px"
                                size="mini"
                                type="danger"
                                round
                                @click="showAchievement(first.memberId)"
                        >查看业绩
                        </van-button>
                    </p>

                    <div v-if="first.teamTree.length>0">
                        <van-icon
                                v-show="!SecondIcon"
                                class="arrow"
                                name="arrow-down"
                                @click="showSecond($event,first.memberId)"
                                ref="{{first.memberId}}"
                        />
                        <van-icon v-show="SecondIcon" class="arrow" name="arrow-down" @click="hideSecond"/>
                    </div>
                </div>
                <div v-show="first.memberId==showSecondIndex">
                    <div class="second-wrap" v-for="second in first.teamTree" :key="second.memberId">
                        <div class="second">
                            <p>昵称：{{second.nickname}}</p>
                            <p>联系电话：{{second.mobile}}</p>
                            <p>伞下会员：{{second.childCounts}}</p>
                            <p>管理等级：{{second.levelName}}</p>
                            <p>
                                <van-button
                                        style="margin-bottom: 20px; margin-right: 10px; padding: 0 5px 0 5px; position: absolute; top: 60px; right: 15px"
                                        size="mini"
                                        type="danger"
                                        round
                                        @click="showAchievement(second.memberId)"
                                >查看业绩
                                </van-button>
                            </p>
                            <div v-if="second.teamTree.length>0">
                                <van-icon
                                        v-show="!thirdIcon"
                                        class="arrow"
                                        name="arrow-down"
                                        @click="showThird(second.memberId)"
                                />
                                <van-icon v-show="thirdIcon" class="arrow" name="arrow-down" @click="hideThird"/>
                            </div>
                        </div>
                        <div v-show="second.memberId==showThirdIndex">
                            <div class="third-wrap" v-for="third in second.teamTree" :key="third.memberId">
                                <div class="third" style="height: 140px">
                                    <p>昵称：{{third.nickname}}</p>
                                    <p>联系电话：{{third.mobile}}</p>
                                    <p>伞下会员：{{third.childCounts}}人</p>
                                    <p>管理等级：{{third.levelName}}</p>
                                    <p>
                                        <van-button
                                                style="margin-bottom: 20px; margin-right: 10px; padding: 0 5px 0 5px;float: right"
                                                size="mini"
                                                type="danger"
                                                round
                                                @click="showAchievement(third.memberId)"
                                        >查看业绩
                                        </van-button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import api from "@/utils/restful";
    import {Collapse, CollapseItem} from "vant";

    export default {
        name: "team",
        components: {
            [Collapse.name]: Collapse,
            [CollapseItem.name]: CollapseItem
        },
        data() {
            return {
                activeNameA: ["1"],
                activeNameB: ["1"],
                activeNameC: ["1"],
                teamGroup: [],
                isShow: false,
                isShowA: false,

                showSecondIndex: "",
                SecondIcon: false,

                showThirdIndex: "",
                thirdIcon: false
            };
        },
        mounted() {
            this.getTeamGroupList();
        },
        methods: {
            getTeamGroupList() {
                this.$axios({
                    method: "get",
                    url: api.teamTree,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    this.teamGroup = res;
                });
            },
            toggle() {
                this.isShow = !this.isShow;
            },
            toggleA() {
                this.isShowA = !this.isShowA;
            },
            showSecond(event, index) {
                //  event.target.classList.add("van-icon-arrow-up");
                this.showSecondIndex = index;
                this.SecondIcon = true;
            },
            hideSecond() {
                this.showSecondIndex = "";
                //  event.target.classList.add("van-icon-arrow-down");
                this.SecondIcon = false;
            },
            showThird(index) {
                console.log(index);
                this.showThirdIndex = index;
                this.thirdIcon = true;
            },
            hideThird() {
                this.showThirdIndex = "";
                this.thirdIcon = false;
            },
            onClickLeft() {
                this.$router.go(-1);
            },
            showAchievement(memberId){
                this.$toast("System error");

                // this.$router.push({
                //     name: "teamAchievement",
                //     params: {memberId: memberId}
                // });
            },
            toggleX: function (index) {
                this.lists.forEach((list, i) => {
                    if (i == index) {
                        list.show = !list.show;
                    }
                    // (list.show = i == index);
                    console.log(i);
                });
            }
        }
    };
</script>

<style lang="less" scoped>
    @import "~style/common.less";

    .team-container {
        min-height: 100vh;
    }

    .first,
    .second,
    .third {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin: 0 auto 6px;
        padding-left: 18px;
        height: 100px;
        border-radius: 10px;
        .font-dpr(14px);
        color: #fff;
    }

    .first {
        position: relative;
        width: 345px;
        background-color: #f1d295;

        .arrow {
            position: absolute;
            top: 12px;
            right: 18px;
            // border: 1px solid red;
            z-index: 999;
        }
    }

    .second {
        position: relative;
        width: 330px;
        background-color: #565759;

        .arrow {
            position: absolute;
            top: 12px;
            right: 18px;
        }
    }

    .third {
        width: 320px;
        background-color: #999797;
    }
</style>

